<script setup>
defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <swiper
    :indicator-dots="true"
    indicator-active-color="#7bc7b7"
    indicator-color="#EAF8F6"
    class="uni-swiper"
  >
    <swiper-item 
      v-for="(item, index) in list" 
      :key="index" 
      class="doctor-brief"
    >
      <image
        :src="item.avatar || '/static/uploads/doctor-avatar.jpg'"
        class="doctor-avatar"
      ></image>
      <view class="doctor-info">
        <view class="meta">
          <text class="name">{{ item.name || '王医生' }}</text>
          <text class="title">{{ item.title || '内分泌科 | 主任医生' }}</text>
        </view>
        <view class="meta">
          <text class="tag">{{ item.level || '三甲' }}</text>
          <text class="hospital">{{ item.hospital || '积水潭医院' }}</text>
        </view>
      </view>
      <navigator class="doctor-contcat" hover-class="none" :url="item.url || ''">
        进入咨询
      </navigator>
    </swiper-item>
  </swiper>
</template>

<style lang="scss" scoped>
.uni-swiper {
  height: 200rpx;
  :deep(.uni-swiper-dots) {
    bottom: 0rpx;
  }
  .doctor-brief {
    display: flex;
    align-items: center;
    height: 160rpx;
    .doctor-avatar {
      width: 100rpx;
      height: 100rpx;
      margin-left: 10rpx;
      border-radius: 50%;
    }
    .doctor-info {
      height: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 12rpx;
      flex: 1;
    }
    .name {
      font-size: 36rpx;
      color: #3c3e42;
      margin-right: 10rpx;
    }
    .title {
      font-size: 24rpx;
      color: #6f6f6f;
    }
    .tag {
      line-height: 1;
      padding: 2rpx 16rpx;
      font-size: 22rpx;
      color: #fff;
      border-radius: 6rpx;
      background-color: #677fff;
    }
    .hospital {
      font-size: 26rpx;
      color: #3c3e42;
      margin-left: 20rpx;
    }
    .doctor-contcat {
      line-height: 1;
      padding: 16rpx 24rpx;
      border-radius: 100rpx;
      font-size: 24rpx;
      color: #2cb5a5;
      background-color: rgba(44, 181, 165, 0.1);
    }
  }
}
</style> 